<template>
	<view class="top_horizontal_line"></view>
	<view class="pets_details_box">
		<view class="order_status_box">
			<view class="status_box" @click="viewOrderProgress(orderInfo)">
				<view>
					<view class="order_status">{{ getStatusText(orderInfo.status) }}</view>
					<view class="order_tips">{{ getStatusTipsText(orderInfo.status) }}</view>
					<view class="order_tips" v-if="orderInfo.refuseReason">原因：{{ orderInfo.refuseReason }}</view>
				</view>
				<uni-icons v-if="orderType == 0 && orderInfo.status == 1" class="order_status_uni_icons" type="right" size="20"></uni-icons>
			</view>
			<view class="server_img_box" v-if="orderInfo.status == 2 && orderType == 0 && orderInfo?.confirmPic" @click="viewOrderProgress(orderInfo)">
				<view class="server_content_box">
					<view class="imgs_box">
						<image
							v-for="(item, index) in orderInfo?.confirmPic.split(',')"
							:key="item"
							@click.stop="previewImages(index, orderInfo?.confirmPic.split(','))"
							class="server_img"
							:src="item"></image>
					</view>
					<uni-icons class="order_status_uni_icons" type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="server_img_box" v-if="orderInfo.status == 3 && orderType == 0 && orderInfo?.orderServiceDaily?.coverPic" @click="viewOrderProgress(orderInfo)">
				<view class="server_tips">{{ orderInfo.orderServiceDaily.title }}</view>
				<view class="server_content_box">
					<view class="imgs_box">
						<image
							v-for="(item, index) in orderInfo?.orderServiceDaily?.coverPic.split(',')"
							:key="item"
							@click.stop="previewImages(index, orderInfo?.orderServiceDaily?.coverPic.split(','))"
							class="server_img"
							:src="item"></image>
					</view>
					<uni-icons class="order_status_uni_icons" type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="order_tag_box" v-if="identity == 1">
				<view class="multiple_order" v-if="orderInfo.petsitterType == 1">指定单</view>
				<view class="transfer_order" v-if="orderInfo.studioDispatchNum">转单</view>
			</view>
		</view>
		<view class="order_info_box">
			<template v-if="orderInfo.newOrderFlag == 1">
				<template v-if="identity === 1">
					<view class="order_data_info_box" v-if="studio.id == orderInfo.studioId">
						<view class="order_data_info" v-if="getReceivingSharingStatus">
							<view class="order_data_label">工作室接单收入：</view>
							<view class="order_data_value xjs-weight-bold">¥{{ cancelStatus ? "0.00" : orderInfo.studioSharing }}</view>
						</view>
						<view class="order_data_info" :class="getReceivingSharingStatus ? 'user_income' : ''">
							<view class="order_data_label">
								<image class="studio_img" :src="orderInfo.petsitterAvatar"></image>
								<view>{{ orderInfo.petsitterNickName }}（服务陪宠师）</view>
							</view>
							<view class="order_data_value xjs-weight-bold">¥{{ cancelStatus ? "0.00" : orderInfo.income }}</view>
						</view>
					</view>
					<view class="order_data_info_box" v-if="studio.id == orderInfo.refereeStudioId">
						<view class="order_data_info" v-if="getPromotionSharingStatus">
							<view class="order_data_label">工作室推广收入：</view>
							<view class="order_data_value xjs-weight-bold">¥{{ cancelStatus ? "0.00" : orderInfo.originStudioSharing }}</view>
						</view>
						<view class="order_data_info" :class="getPromotionSharingStatus ? 'user_income' : ''">
							<view class="order_data_label">
								<image class="studio_img" :src="orderInfo.promotionUserAvatar"></image>
								<view>{{ orderInfo.promotionUserNickName }}（推广人）</view>
							</view>
							<view class="order_data_value xjs-weight-bold">¥{{ cancelStatus ? "0.00" : orderInfo.promotionSharing }}</view>
						</view>
					</view>
				</template>
				<template v-if="identity === 0">
					<view class="order_data_info_box" v-if="orderInfo.promotionUserId == userInfo.id">
						<view class="order_data_info">
							<view class="order_data_label">我的推广收入：</view>
							<view class="order_data_value xjs-weight-bold">¥{{ cancelStatus ? "0.00" : orderInfo.promotionSharing }}</view>
						</view>
					</view>
					<view class="order_data_info_box" v-if="orderInfo.petsitterUserId == userInfo.id">
						<view class="order_data_info">
							<view class="order_data_label">我的服务收入：</view>
							<view class="order_data_value xjs-weight-bold">¥{{ cancelStatus ? "0.00" : orderInfo.income }}</view>
						</view>
					</view>
				</template>
			</template>

			<view class="pet_companion_teacher_box" v-if="(orderInfo.status == 8 && orderInfo.petsitterType == 1) || (orderType == 0 && [1, 2].includes(orderInfo.status))">
				<view class="pet_teacher_title">陪宠师信息</view>
				<view class="pet_teacher_info_box">
					<image class="pet_teacher_img" :src="orderInfo.petsitterAvatar"></image>
					<view class="pet_teacher_info">
						<view class="pet_teacher_name">{{ orderInfo.petsitterNickName }}</view>
						<view class="pet_teacher_tel">{{ orderInfo.petsitterRealName }}｜{{ orderInfo.petsitterPhone }}</view>
					</view>
				</view>
			</view>
			<view class="user_address_box">
				<view class="customer_info_box">
					<image :src="orderInfo.userAvatar" class="customer_img"></image>
					<view class="customer_name_tel">
						<view class="customer_name_box">
							<view class="customer_name">{{ orderInfo.userNickName }}</view>
							<view
								class="contact_user"
								@click="contactUser()"
								v-if="
									([0, 8].includes(orderInfo.status) && identity == 1 && orderType == -1) ||
									([1, 2].includes(orderInfo.status) && orderInfo.petsitterUserId == userInfo.id && orderType == 0)
								">
								联系TA
							</view>
						</view>
						<view class="customer_tel_box">
							<image class="tel_icon" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-69.png"></image>

							<view class="customer_tel">
								<template v-if="shouldShowFullData">{{ orderInfo.userPhone }}</template>
								<template v-else>{{ getMaskedPhoneNumber(orderInfo.userPhone) }}</template>
							</view>
						</view>
					</view>
				</view>
				<view class="address_box">
					<view class="address_distance">服务地址</view>
					<view class="user_info">
						<view class="user_info_box">
							<view class="user_name_box">
								<text class="user_name">{{ getMaskedNickName(orderInfo.userNickName) }}</text>
								<text class="user_tel">{{ getMaskedPhoneNumber(orderInfo.userPhone) }}</text>
							</view>
							<view class="copy_address_btn" v-if="pageSource != 1 || userInfo.id == orderInfo.petsitterUserId" @click="onCopy(orderInfo.userPhone)">复制</view>
						</view>
						<view class="user_address">
							<template v-if="shouldShowFullData">
								{{ orderInfo.address }}
							</template>
							<template v-else>
								{{ getMaskedAddress(orderInfo.address) }}
							</template>
						</view>
						<!--						<view class="linear_distance" v-if="Number(orderInfo.linearDistance)">-->
						<!--							距你{{-->
						<!--								Number(orderInfo.linearDistance) >= 1000 ? new BigNumber(orderInfo.linearDistance).div(1000).toNumber().toFixed(2) + "KM" : orderInfo.linearDistance + "M"-->
						<!--							}}-->
						<!--						</view>-->
					</view>
				</view>
			</view>
			<view class="server_info_box">
				<view class="pets_server_box">
					<image class="server_img" :src="orderType == -1 ? orderInfo.goodsAvatar : orderInfo.goodsPic"></image>
					<view class="pets_server_right">
						<view class="server_name">{{ orderInfo.goodsName }}</view>
						<view class="server_detailed">
							<view>{{ orderInfo.goodsSkuServiceTime }}</view>
							<view class="service_days">{{ orderInfo.petNum }}宠 ｜{{ orderInfo.serviceDays }}天</view>
						</view>
					</view>
				</view>
				<view class="other_server_info_box">
					<view class="pets_info_box">
						<view class="other_label_box">宠物信息</view>
						<view class="other_value_box border_bottom" @click="viewPetsInfo()">
							<view class="pets_box">
								<view class="pets_info" v-for="item in orderInfo.petList" :key="item">
									<image class="pets_img" :src="item.petAvatar"></image>
									<view class="pets_name">{{ item.petNickName }}</view>
									<view class="dividing_line"></view>
									<view class="pets_age">{{ getPetTypeText(item.type) }}</view>
									<view class="dividing_line"></view>
									<view class="pets_age">{{ birthToAgeDiff(item.birthday) }}</view>
								</view>
							</view>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="server_time_info_box">
						<view class="other_label_box">服务时间</view>
						<view class="other_value_box border_bottom">
							<view class="server_time" v-if="orderType == -1" v-for="(item, index) in orderInfo?.serviceTimeSlotArray" :key="item">
								{{ item?.split(",")[1]?.substring(0, 10) }}
							</view>
							<view class="server_time" v-else>{{ orderInfo?.serviceEndTime?.substring(0, 10) }}</view>
						</view>
					</view>
					<view class="other_info_box">
						<view class="other_label_box">上门时间</view>
						<view class="other_value_box">{{ handleDoorTime(orderInfo.doorTime) }}</view>
					</view>
				</view>
			</view>
			<view class="user_other_info_box">
				<view class="user_other_box" v-if="orderType == -1 && orderInfo?.expectPetsitterNickname">
					<view class="user_other_label">期望陪宠师</view>
					<view class="user_other_value">{{ orderInfo.expectPetsitterNickname }}</view>
				</view>
				<view class="user_other_box" v-if="getHandoverTypeText(orderInfo.handoverType, 1)">
					<view class="user_other_label">钥匙给予</view>
					<view class="user_other_value">{{ getHandoverTypeText(orderInfo.handoverType, 1) }}</view>
				</view>
				<view class="user_other_box" v-if="getHandoverTypeText(orderInfo.returnType, 2)">
					<view class="user_other_label">钥匙归还</view>
					<view class="user_other_value">{{ getHandoverTypeText(orderInfo.returnType, 2) }}</view>
				</view>
				<template v-for="(item, i) in orderInfo.remarkList" :key="i">
					<view class="user_other_box" v-if="item?.remarks || item?.imgList?.length">
						<view class="user_other_label">{{ getRemarkTypeText(item) }}</view>
						<view class="user_other_value">
							<view class="fold_con_box">
								<view class="fold_content" v-if="item.isShow">{{ item.remarks }}</view>
								<view class="fold_content" v-else></view>
								<view class="fold_btn" @click="handleChangeShow(item)">
									<view class="btn_text">{{ item.isShow ? "收起" : "展开" }}</view>
									<uni-icons :type="item.isShow ? 'up' : 'down'" size="16" color="#FF6084"></uni-icons>
								</view>
							</view>
							<view class="fold_img_box" v-if="item.imgList.length && item.isShow">
								<image v-for="(val, index) in item.imgList" @click.stop="previewImages(index, item.imgList)" :key="val" class="fold_img" :src="val"></image>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="value_added_services_box" v-if="orderInfo?.orderGoodsSkuVOS?.length">
				<view class="add_title">增值服务</view>
				<view class="add_order_list_box">
					<view class="add_order_item" v-for="item in orderInfo.orderGoodsSkuVOS" :key="item.skuId">
						<image class="add_server_img" :src="item.goodsAvatar"></image>
						<view class="add_server_info">
							<view class="add_server_name">{{ item.goodsName }}</view>
							<view class="add_server_price">
								<view class="price">￥{{ item.price }}/次</view>
								<view class="times">×{{ item.serviceDays }}</view>
							</view>
							<view class="add_server_pets" v-if="item?.petVOList?.length || (orderType == -1 ? item?.serviceDateStr : item?.serviceDate)">
								<template v-if="item?.petVOList?.length">
									<text v-for="(val, i) in item.petVOList" :key="i">
										<template v-if="orderType == -1">
											<template v-if="item?.serviceDateStr?.split(',').length">
												<text class="pet_name_date" v-for="(itemVal, itemValIndex) in item?.serviceDateStr?.split(',')" :key="itemValIndex">
													{{ val.petNickName }}({{ itemVal }})
												</text>
											</template>
											<text class="pet_name_date" v-else>
												{{ val.petNickName }}
											</text>
										</template>
										<text class="pet_name_date" v-else>{{ val.petNickName }}({{ item?.serviceDate?.substring(0, 10) }})</text>
									</text>
								</template>
								<template class="" v-else>
									<template v-if="orderType == -1">
										<text class="pet_name_date" v-for="(itemVal, itemValIndex) in item?.serviceDateStr?.split(',')" :key="itemValIndex">
											{{ itemVal }}
										</text>
									</template>
									<text class="pet_name_date" v-else>{{ item?.serviceDate?.substring(0, 10) }}</text>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order_data_info_box" v-if="shouldShowFullData">
				<view class="order_data_info">
					<view class="order_data_label">基础费</view>
					<view class="order_data_value">¥{{ Number(orderInfo.baseAmount) }}</view>
				</view>
				<view class="order_data_info" v-if="Number(orderInfo.extAmountObj?.count_amount)">
					<view class="order_data_label">多宠加价</view>
					<view class="order_data_value">¥{{ Number(orderInfo.extAmountObj?.count_amount) }}</view>
				</view>
				<view class="order_data_info" v-if="Number(orderInfo.extServiceAmount)">
					<view class="order_data_label">增值服务</view>
					<view class="order_data_value">¥{{ Number(orderInfo.extServiceAmount) }}</view>
				</view>
				<view class="order_data_info order_total">
					<view class="order_data_label">合计：</view>
					<view class="order_data_value">¥{{ Number(orderInfo.payAmount) }}</view>
				</view>
			</view>
			<view class="order_data_info_box" v-if="orderInfo?.promotionUserId">
				<view class="order_data_info">
					<view class="order_data_label">分享人</view>
					<view class="order_data_value">
						<image class="studio_img" :src="orderInfo.promotionUserAvatar"></image>
						<view>{{ orderInfo.promotionUserNickName }}</view>
						<!--						<uni-icons type="right" size="20"></uni-icons>-->
					</view>
				</view>
			</view>
			<view class="order_data_info_box" v-if="![0, 2, 3, 5, 6, 7].includes(orderInfo.status) && orderInfo.newOrderFlag == 2">
				<view class="income_structure">本单收益构成</view>
				<template v-if="identity === 1">
					<view class="order_data_info">
						<view class="order_data_label">平台抽成</view>
						<view class="order_data_value">¥{{ orderInfo.commissionSharing }}</view>
					</view>
					<view class="order_data_info">
						<view class="order_data_label">工作室收益</view>
						<view class="order_data_value">¥{{ orderInfo.studioSharing }}</view>
					</view>
				</template>
				<view class="order_data_info">
					<view class="order_data_label">陪宠师收益</view>
					<view class="order_data_value">¥{{ orderInfo.income }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.promotionUserId && orderInfo.promotionSharing && identity === 1">
					<view class="order_data_label">分享人收益</view>
					<view class="order_data_value">¥{{ orderInfo.promotionSharing }}</view>
				</view>
			</view>
			<view class="order_data_info_box">
				<view class="order_data_info">
					<view class="order_data_label">订单号</view>
					<view class="order_data_value">
						<view class="">{{ orderInfo.id }}</view>
						<view class="dividing_line"></view>
						<view class="copy_btn" @click="onCopy(orderInfo.id)">复制</view>
					</view>
				</view>
				<view class="order_data_info">
					<view class="order_data_label">创建时间</view>
					<view class="order_data_value">{{ orderInfo.createTime }}</view>
				</view>
				<!--        <view class="order_data_info" v-if="getPayTypeText(orderInfo.payType)">-->
				<!--          <view class="order_data_label">支付方式</view>-->
				<!--          <view class="order_data_value">{{ getPayTypeText(orderInfo.payType) }}</view>-->
				<!--        </view>-->
				<view class="order_data_info" v-if="orderInfo.payTime">
					<view class="order_data_label">支付时间</view>
					<view class="order_data_value">{{ orderInfo.payTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.acceptTime">
					<view class="order_data_label">接单时间</view>
					<view class="order_data_value">{{ orderInfo.acceptTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.confirmTime">
					<view class="order_data_label">到达时间</view>
					<view class="order_data_value">{{ orderInfo.confirmTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.finishTime">
					<view class="order_data_label">完成时间</view>
					<view class="order_data_value">{{ orderInfo.finishTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.cancelTime">
					<view class="order_data_label">取消时间</view>
					<view class="order_data_value">{{ orderInfo.cancelTime }}</view>
				</view>
			</view>
		</view>
		<view class="footer_btn_box" v-if="pageSource != 1">
			<template v-if="orderType == -1">
				<template v-if="identity == 1 && orderInfo.petsitterType != 1">
					<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[8].includes(orderInfo.status)" @click.stop="handleCancelAllOrder(orderInfo)">取消订单</view>
					<!--					<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1, 8].includes(orderInfo.status) && orderInfo.type == 1" @click.stop="handleRefuse(orderInfo)">-->
					<!--						拒绝接单-->
					<!--					</view>-->
					<view class="xjs-btn-primary solid_btn btn_mg" v-if="[8].includes(orderInfo.status)" @click.stop="handleAccept(orderInfo)">立即接单</view>
					<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[8].includes(orderInfo.status)" @click.stop="handleTransferOrder(orderInfo)">转单</view>
					<view class="xjs-btn-primary solid_btn btn_mg" v-if="[8].includes(orderInfo.status)" @click.stop="handleDispatch(orderInfo)">立即派单</view>
					<!--					<view class="xjs-btn-primary solid_btn btn_mg" v-if="[0].includes(orderInfo.status)" @click.stop="handleChangePrice(orderInfo)">修改价格</view>-->
				</template>

				<view
					class="xjs-btn-primary-plain hollow_btn btn_mg"
					v-if="
						(identity == 1 && orderInfo.petsitterType != 1 && [1, 8].includes(orderInfo.status) && orderInfo.type == 1) ||
						(identity == 1 && userInfo.id == orderInfo.petsitterUserId && [1, 8].includes(orderInfo.status))
					"
					@click.stop="handleRefuse(orderInfo)">
					拒绝接单
				</view>

				<template v-if="identity == 1 && userInfo.id == orderInfo.petsitterUserId">
					<!--					<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1, 8].includes(orderInfo.status)" @click.stop="handleRefuse(orderInfo)">拒绝接单</view>-->
					<view class="xjs-btn-primary solid_btn btn_mg" v-if="[1, 8].includes(orderInfo.status)" @click.stop="handleAccept(orderInfo)">立即接单</view>
				</template>
				<template v-if="identity != 1 && orderInfo.status == 1">
					<view class="xjs-btn-primary-plain refuse_btn" @click.stop="handleRefuse(orderInfo)">拒绝接单/转单</view>
					<view class="accept_immediately_box" @click.stop="handleAccept(orderInfo)">
						<view class="accept_immediately">立即接单</view>
						<view class="immediately_time">{{ filterTime(orderInfo.orderDispatchAutoCancelTime) }}后未接单将自动转派</view>
					</view>
				</template>
			</template>
			<template v-if="orderType == 0 && userInfo.id == orderInfo.petsitterUserId">
				<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1].includes(orderInfo.status)" @click.stop="handleCancel(orderInfo)">取消订单</view>
				<view class="xjs-btn-primary solid_btn btn_mg" v-if="[1].includes(orderInfo.status)" @click.stop="handleConfirmArrival(orderInfo)">我已到达</view>
				<view class="xjs-btn-primary solid_btn btn_mg" v-if="[2].includes(orderInfo.status)" @click.stop="handleDailyService(orderInfo)">服务完成</view>
				<!--				<view-->
				<!--					class="xjs-btn-primary-plain hollow_btn btn_mg"-->
				<!--					v-if="[3].includes(orderInfo.status) && !orderInfo.uploadedDailyFlag"-->
				<!--					@click.stop="handleDailyService(orderInfo)">-->
				<!--					上传服务日常-->
				<!--				</view>-->
			</template>
		</view>
	</view>
	<petsInfoPop ref="petsInfoRef"></petsInfoPop>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import api from "@/api/index";
import petsInfoPop from "../components/petsInfoPop/index";

import { useStudioStoreToRefs } from "@/store/useStudioStore";
import { birthToAgeDiff } from "@/hooks/useFunction";
import BigNumber from "bignumber.js";
import dayjs from "dayjs";
import { useUserStoreToRefs } from "@/store/useUserStore";

let { studioBalance, studio, identity } = useStudioStoreToRefs();
let { userInfo } = useUserStoreToRefs();

let orderId = ref();
let orderType = ref();
let pageSource = ref(""); // 1 收益
let ispreviewImage = ref(false);
let orderInfo = reactive({});

// 展开收起
const handleChangeShow = (item) => {
	// showInfo[type] = !showInfo[type];
	item.isShow = !item.isShow;
};
const handleDoorTime = (data) => {
	if (data) {
		let dataArr = data?.split("~");
		if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
			return "无时间段要求";
		} else {
			return data;
		}
	} else {
		return data;
	}
};
const getRemarkTypeText = (item) => {
	// 服务叮嘱json: [{"type": 0-其他; 1-宠物粮、罐头、零食位置; 2-饮用水位置; 3-猫砂和猫砂盆位置; 4-牵引绳位置, "imgs":[],"remakrs": ""}]
	switch (Number(item.type)) {
		case 0:
			return "其它事项";
		case 1:
			return "宠物食物";
		case 2:
			return "饮用水";
		case 3:
			return "厕所位置";
		case 4:
			return "牵引绳";
	}
};

const getStatusText = (status) => {
	if (orderType.value == -1) {
		switch (status) {
			case 0:
				return "待付款";
			case 1:
				return "待接单";
			case 2:
			case 3:
				return "已接单";
			case 4:
				return "已完成";
			case 5:
			case 6:
			case 7:
				return "已取消";
			case 8:
				return "待派单";
			default:
				return "";
		}
	} else {
		switch (status) {
			case 0:
				return "待接单";
			case 1:
				return "待服务";
			case 2:
				return "服务中";
			case 3:
				return "已完成";
			case 4:
			case 5:
				return "已取消";
			case 6:
				return "待付款";
			default:
				return "";
		}
	}
};
const getStatusTipsText = (status) => {
	// --总单订单状态: 0-待付款; 1-待接单; 2-待服务; 3-服务中; 4-已完成; 5-已关闭; 6-已取消; 7-已退款 8-待派单
	// --日单状态:    1-待服务; 2-服务中 3-已完成(已结算); 4-已退款; 5-已关闭
	if (orderType.value == -1) {
		switch (status) {
			case 0:
				return "等待客户付款";
			case 1:
				if (identity.value === 1) {
					return "等待陪宠师接单";
				} else {
					return `${filterTime(orderInfo.orderDispatchAutoCancelTime)}后未接单，将自动转派`;
				}
			case 2:
				return "";
			case 3:
				return "陪宠师已经到达，开始服务";
			case 4:
				return "陪宠师已经完成服务";
			case 5:
				return "超时未支付";
			case 6:
			case 7:
				if (orderInfo.cancelType == 1) {
					return "用户主动取消";
				} else if (orderInfo.cancelType == 2) {
					return "店长取消";
				} else if (orderInfo.cancelType == 3) {
					return "陪宠师取消";
				} else {
					return "订单已取消";
				}
			case 8:
				return "请及时派单";
			default:
				return "";
		}
	} else {
		switch (status) {
			case 1:
				return "请陪宠师及时和宠物主沟通上门时间以及其他细节";
			case 2:
				return "陪宠师已经到达，开始服务";
			case 3:
				return "陪宠师已经完成服务";
			case 4:
			case 5:
				if (orderInfo.cancelType == 1) {
					return "用户主动取消";
				} else if (orderInfo.cancelType == 2) {
					return "店长取消";
				} else if (orderInfo.cancelType == 3) {
					return "陪宠师取消";
				} else {
					return "订单已取消";
				}
			default:
				return "";
		}
	}
};

const getPayTypeText = (status) => {
	switch (status) {
		case 1:
			return "抖音支付";
		case 2:
			return "支付宝";
		case 3:
			return "微信支付";
		default:
			return "";
	}
};
const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};
// 交接方式: 0-有人在家;1-密码;2-丰巢存件;3-其他; 4-面交; 5-快递; 6-闪送; 7-放在指定位置;
const getHandoverTypeText = (status, type) => {
	switch (status) {
		case 0:
			return "有人在家";
		case 1:
			return "密码锁";
		case 2:
			return "丰巢存件";
		case 3:
			if (type === 1) {
				return orderInfo.handoverRemarks;
			} else if (type === 2) {
				return orderInfo.returnRemarks;
			} else {
				return "";
			}
		case 4:
			return "面交";
		case 5:
			return "快递";
		case 6:
			return "闪送";
		case 7:
			return "放在指定位置";
		default:
			return "";
	}
};
const shouldShowFullData = computed(() => {
	return (pageSource.value === "1" && userInfo.value.id === orderInfo.petsitterUserId) || pageSource.value !== "1";
});
const cancelStatus = computed(() => {
	if (orderType.value == -1) {
		return [5, 6, 7].includes(orderInfo.status);
	}
	if (orderType.value == 0) {
		return [4, 5].includes(orderInfo.status);
	}
});
const getReceivingSharingStatus = computed(() => {
	let mainOrder = [];
	let receivingSharingStatus = false;
	orderInfo?.orderGoodsSkuVOSAll.forEach((item) => {
		if ([1, 2, 3].includes(item.goodsType)) {
			mainOrder.push(item);
		}
	});
	mainOrder.forEach((item) => {
		if (item.receivingSharingStatus == 1) {
			receivingSharingStatus = true;
		}
	});
	return receivingSharingStatus;
});
const getPromotionSharingStatus = computed(() => {
	let mainOrder = [];
	let promotionSharingStatus = false;
	orderInfo?.orderGoodsSkuVOSAll.forEach((item) => {
		if ([1, 2, 3].includes(item.goodsType)) {
			mainOrder.push(item);
		}
	});
	mainOrder.forEach((item) => {
		if (item.promotionSharingStatus == 1) {
			promotionSharingStatus = true;
		}
	});
	return promotionSharingStatus;
});

// 隐藏地址中除省市区的其他信息
const getMaskedAddress = (address) => {
	if (!address) return "";

	// 定义省、市、区的正则表达式
	// const provinceRegex = /^(.+?[省|自治区|特别行政区|市])/;
	const cityRegex = /([^省|自治区|特别行政区]+?[市|自治州|地区|盟])/;
	const districtRegex = /([^市]+?[区|县|旗])/;

	// let provinceMatch = address.match(provinceRegex);

	let cityMatch = address.match(cityRegex);
	let districtMatch = address.match(districtRegex);
	// console.log(provinceMatch, "provinceMatch");
	console.log(cityMatch, "cityMatch");
	console.log(districtMatch, "districtMatch");

	// let province = provinceMatch ? provinceMatch[1] : "";
	let city = cityMatch ? cityMatch[1] : "";
	let district = districtMatch ? districtMatch[1] : "";

	// 计算省市区总长度
	const prefixLength = city.length + district.length;
	// const prefixLength = province.length + city.length + district.length;
	// 获取剩余部分并用 * 替换
	const maskedPart = "*".repeat(Math.max(0, address.length - prefixLength));

	return city + district + maskedPart;
};
const getDetailsData = async () => {
	let url = "";
	if (orderType.value == -1) {
		url = `/mall/order/detail/${orderId.value}`;
	} else {
		url = `/mall/order/order-detail/dayOrderDetail?id=${orderId.value}&studioId=${studio.value.id}`;
	}
	const res = await api({
		method: "get",
		url: url,
		contentType: "json"
	});
	if (res.code === 0) {
		res.data.extAmountObj = JSON.parse(res.data?.extAmountJson) || {};
		// 服务叮嘱json: [{"type": 0-其他; 1-宠物粮、罐头、零食位置; 2-饮用水位置; 3-猫砂和猫砂盆位置; 4-牵引绳位置, "imgs":[],"remakrs": ""}]
		res.data.remarkList = JSON.parse(res.data?.remarks) || [];
		// res.data.remarkList = [
		// 	{ type: 0, imgs: ["/static/logo.png"], remakrs: "其他" },
		// 	{
		// 		type: 1,
		// 		imgs: ["/static/logo.png"],
		// 		remakrs: "宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置"
		// 	},
		// 	{ type: 2, imgs: ["/static/logo.png"], remakrs: "饮用水位置" },
		// 	{ type: 3, imgs: ["/static/logo.png"], remakrs: "猫砂和猫砂盆位置" },
		// 	{ type: 4, imgs: ["/static/logo.png"], remakrs: "牵引绳位置" }
		// ];
		res.data.remarkList.forEach((item) => {
			item.isShow = false;
			item.imgList = item.imgs ? item.imgs?.split(",") : [];
		});
		Object.assign(orderInfo, res.data);
	}
};
const viewOrderProgress = async (item) => {
	if (orderType.value == 0) {
		uni.navigateTo({
			url: `/pages/petsOrder/orderProcess/index?orderId=${item.id}&studioId=${studio.value.id}`
		});
	}
};

// 联系用户
const contactUser = () => {
	uni.navigateTo({
		url: `/pages/im/message/index?id=${orderInfo.userId}&username=${orderInfo.userNickName}&avatar=${orderInfo.userAvatar}`
	});
};
const onCopy = (id) => {
	uni.setClipboardData({
		data: id
	});
};
let petsInfoRef = ref();
const viewPetsInfo = () => {
	petsInfoRef.value.handleOpenPop(JSON.stringify(orderInfo.petList));
};
// 判断订单状态变更
const handleOrderStatusChange = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/checkOrderStatus?orderId=${item.id}&status=${item.status}&type=${orderType.value}`
		});
		if (res.code == 0) {
			if (res.data == 1) {
				uni.showModal({
					title: "提示",
					content: "数据已过期，请刷新重试",
					showCancel: false,
					confirmText: "好的",
					success: async (res) => {
						if (res.confirm) {
							await getDetailsData();
						}
					}
				});
				reject(false);
			} else {
				resolve(true);
			}
		} else {
			reject(false);
		}
	});
};
// 修改价格
const handleChangePrice = async (item) => {
	await handleOrderStatusChange(item);
	uni.navigateTo({
		url: `/pages/studioOrders/orderPriceAdjustment/index?id=${item.id}&serviceDays=${item.serviceDays}&payAmount=${item.payAmount}&petNum=${item.petNum}&goodsSkuServiceTime=${item.goodsSkuServiceTime}&goodsName=${item.goodsName}`
	});
};
// 拒绝，转单
const handleRefuse = async (item) => {
	await handleOrderStatusChange(item);
	uni.showModal({
		title: "确定拒绝接单/转单吗？",
		content: "注意：提交后订单将转派给其他陪宠师进行接单",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/refuse`,
					data: {
						orderId: item.id
					}
				});
				if (res.code == 0) {
					uni.showToast({
						title: "转单成功"
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
				await getDetailsData();
			}
		}
	});
};
const previewImages = (currentIndex, urls) => {
	ispreviewImage.value = true;
	uni.previewImage({
		current: currentIndex,
		urls
	});
};
// 获取其他待服务日单
const getOtherDayOrder = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/order-detail/getJoinOrderDetail`,
			data: {
				orderId: item.orderId,
				orderDetailId: item.id
			}
		});
		if (res.code == 0) {
			if (res.data.length > 1) {
				resolve(true);
			} else {
				resolve(false);
			}
		} else {
			reject(false);
		}
	});
};
// 陪宠师取消订单
const handleCancel = async (item) => {
	await handleOrderStatusChange(item);
	const res = await getOtherDayOrder(item);
	if (res) {
		uni.navigateTo({
			url: `/pages/studioOrders/cancellationOrder/index?orderId=${item.orderId}&orderDetailId=${item.id}&orderType=${orderType.value}`
		});
	} else {
		uni.showModal({
			title: "确定取消订单吗？",
			content: "注意：确定后订单将关闭",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/studioOrders/cancellationReason/index?orderId=${item.orderId}&orderDetailId=${item.id}&checkedList=${item.id}&orderType=${orderType.value}`
					});
				}
			}
		});
	}
};
// 店长取消订单
const handleCancelAllOrder = async (item) => {
	await handleOrderStatusChange(item);
	uni.showModal({
		title: "确定取消订单吗？",
		content: "注意：确定后订单将关闭",
		success: async (res) => {
			if (res.confirm) {
				uni.navigateTo({
					url: `/pages/studioOrders/cancellationReason/index?orderId=${item.id}&orderType=${orderType.value}`
				});
			}
		}
	});
};
// 上传服务日常
const handleDailyService = async (item) => {
	await handleOrderStatusChange(item);
	let specificTime = dayjs(item.confirmTime);
	let newTime = specificTime.add(3, "minute");
	let currentTime = dayjs();
	// 检查新时间是否在当前时间之后
	if (newTime.isAfter(currentTime)) {
		uni.showModal({
			title: "温馨提示",
			content: "服务时间过短，请服务完成后再点击",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {
				if (res.confirm) {
				}
			}
		});
	} else {
		uni.navigateTo({
			url: `/pages/petsOrder/uploadRoutine/index?orderId=${item.id}`
		});
	}
};
// 确认到达
const handleConfirmArrival = async (item) => {
	await handleOrderStatusChange(item);
	// 检查服务时间是否是今天
	if (!dayjs(dayjs(item.serviceStartTime, "YYYY-MM-DD")).isSame(dayjs())) {
		uni.showModal({
			title: "温馨提示",
			content: "服务单服务时间非今天，\n" + "确定提前到达开始服务吗？",
			confirmText: "确定",
			cancelText: "取消",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/petsOrder/confirmArriving/index?orderId=${item.id}&studioId=${studio.value.id}`
					});
				}
			}
		});
	}
};
// 立即派单
const handleDispatch = async (item) => {
	await handleOrderStatusChange(item);
	const res = await api({
		method: "get",
		url: `/mall/studio/petsitter-team/dispatchPage`,
		data: {
			page: 1,
			limit: 20,
			orderId: item.id
		}
	});
	if (res.code == 0) {
		uni.navigateTo({
			url: `/pages/myStudio/studio/selectDispatch/index?id=${item.id}&petsitterType=${item.petsitterType}&serviceDays=${item.serviceDays}&status=${item.status}`
		});
	} else {
		uni.showModal({
			title: "温馨提示",
			content: res.msg,
			showCancel: false,
			confirmText: "好的"
		});
	}
};
const transferOrderCheck = async (item) => {
	return new Promise(async (resolve, reject) => {
		try {
			const res = await api({
				method: "get",
				url: `/mall/order/transferOrderCheck`,
				data: {
					orderId: item.id
				}
			});
			resolve(res);
		} catch (e) {
			reject(e);
		}
	});
};
const handleTransferOrder = async (item) => {
	const checkRes = await transferOrderCheck(item);
	if (checkRes.data == 0) {
		uni.navigateTo({
			url: `/pages/myStudio/studio/selectTransferOrder/index?id=${studio.value.id}&longitudes=${item.addressAxis[0]}&latitudes=${item.addressAxis[1]}&orderId=${item.id}`
		});
	} else if (checkRes.data == 1) {
		uni.showModal({
			title: "温馨提示",
			content: "该单已被同城所有工作室拒绝过了\n" + "您可以自己接单或取消订单",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {}
		});
	} else if (checkRes.data == 2) {
		uni.showModal({
			title: "温馨提示",
			content: "本订单所在城市暂无工作室",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {}
		});
	}
};

// 立即接单
const handleAccept = async (item) => {
	await handleOrderStatusChange(item);
	uni.showModal({
		title: "提示",
		content: "确定接单？",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/acceptV2`,
					data: {
						id: item.id
					}
				});
				if (res.code == 0) {
					uni.navigateTo({
						url: `/pages/myStudio/studio/dispatchSuccess/index?type=receivingOrders&id=${item.userId}&serviceDays=${item.serviceDays}&userNickName=${item.userNickName}&userAvatar=${item.userAvatar}`
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			}
		}
	});
};

// 服务完成
const handleEndServer = async (item) => {
	await handleOrderStatusChange(item);
	let specificTime = dayjs(item.confirmTime);
	let newTime = specificTime.add(3, "minute");
	let currentTime = dayjs();
	// 检查新时间是否在当前时间之后
	if (newTime.isAfter(currentTime)) {
		uni.showModal({
			title: "温馨提示",
			content: "服务时间过短，请服务完成后再点击",
			showCancel: false,
			confirmText: "好的",
			success: async (res) => {
				if (res.confirm) {
					await getDetailsData();
				}
			}
		});
	} else {
		uni.showModal({
			title: "提示",
			content: "确定完成服务吗？",
			success: async (res) => {
				if (res.confirm) {
					const res = await api({
						method: "post",
						url: `/mall/order/order-detail/finishV2`,
						data: {
							id: item.id
						}
					});
					if (res.code == 0) {
						uni.showToast({
							title: "服务完成",
							icon: "none"
						});
						uni.navigateTo({
							url: `/pages/petsOrder/uploadRoutine/index?orderId=${item.id}`
						});
					}
				}
			}
		});
	}
};
const getMaskedPhoneNumber = (phoneNumber) => {
	if (!phoneNumber) return "";
	const regex = /^(\d{3})\d*(\d{4})$/;
	return phoneNumber.replace(regex, "$1****$2");
};
const getMaskedNickName = (nickName) => {
	if (!nickName) return "";
	const regex = /^(\S)\S*/;
	return nickName.replace(regex, "$1*");
};

const filterTime = (endTime) => {
	// let nowTime = getTimeFormat(getCurrentTime('date'))
	// if((Math.floor(getTimeFormat(endTime) - nowTime) / 3600) > 24){
	// 	return getCurrentTime('month',endTime) + ' ' + getCurrentTime('hour',endTime)
	// }
	let time = getCurrentTime("date");
	if (getCurrentTime("year", endTime) === getCurrentTime("year", time)) {
		return getCurrentTime("hour", endTime);
	}
	return getCurrentTime("month", endTime) + " " + getCurrentTime("hour", endTime);
};

//当前时间
const getCurrentTime = (type = "date", time = "") => {
	let date = time == "" ? new Date() : new Date(time); //当前时间
	let year = date.getFullYear(); //年
	let month = repair(date.getMonth() + 1); //月
	let day = repair(date.getDate()); //日
	let hour = repair(date.getHours()); //时
	let minute = repair(date.getMinutes()); //分
	let second = repair(date.getSeconds()); //秒

	let curTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

	if (type == "date") {
		return curTime;
	} else if (type == "month") {
		return month + "/" + day;
	} else if (type == "year") {
		return year + month + day;
	} else {
		return hour + ":" + minute;
	}
};

const repair = (i) => {
	if (i >= 0 && i <= 9) {
		return "0" + i;
	} else {
		return i;
	}
};

onLoad(async (options) => {
	orderId.value = options.id;
	orderType.value = options.orderType;
	pageSource.value = options?.pageSource;
	// await getDetailsData()
});
onShow(async () => {
	if (!ispreviewImage.value) {
		await getDetailsData();
	}
});
</script>

<style scoped lang="scss">
.pets_details_box {
	width: 100%;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 104rpx + 28rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 104rpx + 28rpx);

	.order_status_box {
		position: relative;
		width: 100%;
		padding: 48rpx 32rpx;
		padding-bottom: 90rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #ff7d9e 18%, #ffb796 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;

		.status_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.order_status {
			font-weight: bold;
			font-size: 40rpx;
			color: #ffffff;
		}

		.order_tips {
			font-weight: 400;
			font-size: 26rpx;
			color: #ffffff;
			margin-top: 8rpx;
		}

		.server_img_box {
			margin-top: 16rpx;
			width: 100%;

			.server_tips {
				font-weight: bold;
				font-size: 26rpx;
				color: #ffffff;
				margin-top: 8rpx;
			}

			.server_content_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 8rpx;

				.imgs_box {
					.server_img {
						width: 160rpx;
						height: 213rpx;
						margin-right: 16rpx;
					}
				}
			}
		}

		.order_tag_box {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			display: flex;

			.multiple_order {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 42rpx;
				background: #ffffff;
				border-radius: 38rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #ff6084;
				padding: 8rpx 16rpx;
				box-sizing: border-box;
			}

			.transfer_order {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 42rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 38rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #6363ff;
				margin-left: 8rpx;
			}
		}
	}

	.order_info_box {
		position: relative;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: -48rpx;

		.pet_companion_teacher_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.pet_teacher_title {
				font-weight: bold;
				font-size: 26rpx;
				color: #1b2120;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #e4e6e6;
			}

			.pet_teacher_info_box {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.pet_teacher_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.pet_teacher_info {
					margin-left: 32rpx;
					width: calc(100% - 120rpx - 32rpx);

					.pet_teacher_name {
						font-weight: bold;
						font-size: 36rpx;
						color: #1b2120;
					}

					.pet_teacher_tel {
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
						margin-top: 16rpx;
					}
				}
			}
		}

		.user_address_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.customer_info_box {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-bottom: 32rpx;
				box-sizing: border-box;
				line-height: 1;
				border-bottom: 1px solid #e4e6e6;

				.customer_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.customer_name_tel {
					display: flex;
					flex-direction: column;
					margin-left: 32rpx;
					width: calc(100% - 152rpx);

					.customer_name_box {
						display: flex;
						justify-content: space-between;

						.customer_name {
							font-weight: bold;
							font-size: 36rpx;
							color: #1b2120;
							max-width: 300rpx;
						}

						.contact_user {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 122rpx;
							height: 42rpx;
							background: #ffffff;
							border-radius: 38rpx;
							border: 2rpx solid #ff6084;
							font-weight: 400;
							font-size: 26rpx;
							color: #ff6084;
						}
					}

					.customer_tel_box {
						display: flex;
						margin-top: 16rpx;
						align-items: center;

						.tel_icon {
							width: 32rpx;
							height: 32rpx;
						}

						.customer_tel {
							font-size: 26rpx;
							color: #7c807f;
							margin-left: 8rpx;
						}
					}
				}
			}

			.address_box {
				display: flex;
				justify-content: space-between;
				margin-top: 22rpx;

				.address_distance {
					font-weight: bold;
					font-size: 26rpx;
					color: #1b2120;
					width: 120rpx;
					margin-top: 18rpx;
				}

				.user_info {
					display: flex;
					margin-left: 32rpx;
					flex-direction: column;
					width: calc(100% - 152rpx);
				}

				.user_info_box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.user_name_box {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						.user_name {
							font-weight: bold;
							font-size: 36rpx;
							color: #1b2120;
						}

						.user_tel {
							font-weight: 400;
							font-size: 30rpx;
							color: #5c5e5e;
							margin-top: 6rpx;
							margin-left: 24rpx;
						}
					}

					.copy_address_btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 84rpx;
						height: 42rpx;
						background: #ffffff;
						border-radius: 38rpx;
						border: 2rpx solid #ff6084;
						font-weight: 400;
						font-size: 26rpx;
						color: #ff6084;
					}
				}

				.user_address {
					word-break: break-all;
					font-weight: 400;
					font-size: 30rpx;
					color: #7c807f;
					line-height: 1.6;
					margin-top: 16rpx;
				}

				.linear_distance {
					font-weight: 400;
					font-size: 30rpx;
					color: #ff6084;
					margin-top: 32rpx;
				}
			}
		}

		.server_info_box {
			margin-top: 24rpx;
			width: 100%;
			padding: 40rpx 32rpx 0;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 24rpx;
			line-height: 1;

			.pets_server_box {
				display: flex;
				align-items: center;
				padding-bottom: 48rpx;
				border-bottom: 1rpx solid #e4e6e6;

				.server_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 24rpx;
				}

				.pets_server_right {
					margin-left: 32rpx;
					width: calc(100% - 120rpx - 32rpx);

					.server_name {
						font-weight: bold;
						font-size: 36rpx;
						color: #1b2120;
					}

					.server_detailed {
						display: flex;
						justify-content: space-between;
						font-weight: 400;
						font-size: 30rpx;
						color: #1b2120;
						margin-top: 32rpx;

						.service_days {
							font-weight: bold;
						}
					}
				}
			}

			.other_server_info_box {
				.server_info_box {
				}

				.pets_info_box {
					display: flex;

					.other_label_box {
						font-weight: bold;
						font-size: 26rpx;
						width: 120rpx;
						color: #1b2120;
						margin-top: 70rpx;
					}

					.other_value_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 32rpx;
						padding: 46rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;
						border-bottom: 1rpx solid #e4e6e6;

						.pets_box {
							.pets_info {
								display: flex;
								align-items: center;
								margin-bottom: 24rpx;

								.pets_img {
									width: 64rpx;
									height: 64rpx;
									border-radius: 36rpx 36rpx 36rpx 36rpx;
								}

								.pets_name {
									font-weight: 400;
									font-size: 30rpx;
									color: #1b2120;
									margin-left: 8rpx;
								}

								.dividing_line {
									width: 2rpx;
									height: 24rpx;
									background: #cacccc;
									margin: 0 8rpx;
								}

								.pets_age {
									font-weight: 400;
									font-size: 26rpx;
									color: #5c5e5e;
								}
							}

							.pets_info:last-child {
								margin-bottom: 0;
							}
						}

						.uni-icons {
							color: #666;
						}
					}
				}

				.server_time_info_box {
					display: flex;
					margin-bottom: 10rpx;

					.other_label_box {
						font-weight: bold;
						width: 120rpx;
						font-size: 26rpx;
						color: #1b2120;
						padding-top: 48rpx;
						box-sizing: border-box;
					}

					.other_value_box {
						margin-left: 32rpx;
						padding: 14rpx 0 48rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;

						.server_time {
							font-weight: 400;
							font-size: 28rpx;
							color: #1b2120;
							margin-top: 32rpx;
							word-break: break-word;
							display: inline-block;
							margin-right: 32rpx;
						}
					}
				}

				.other_info_box {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.other_label_box {
						font-weight: bold;
						font-size: 26rpx;
						color: #1b2120;
						width: 120rpx;
					}

					.other_value_box {
						display: flex;
						align-items: center;
						margin-left: 32rpx;
						padding: 48rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;
						border-top: 1rpx solid #e4e6e6;
						font-weight: 400;
						font-size: 30rpx;
						color: #1b2120;
					}
				}

				.service_instructions_box {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.other_label_box {
						font-weight: bold;
						font-size: 26rpx;
						color: #1b2120;
						width: 120rpx;
					}

					.other_value_box {
						display: flex;
						align-items: center;
						margin-left: 32rpx;
						padding: 48rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;
						border-top: 1rpx solid #e4e6e6;
						font-weight: 400;
						font-size: 30rpx;
						color: #1b2120;
						word-break: break-word;
					}
				}
			}
		}

		.user_other_info_box:not(:empty) {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 0 40rpx 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			margin-bottom: 24rpx;

			.user_other_box {
				box-sizing: border-box;
				display: flex;
				flex-direction: row;

				.user_other_label {
					width: 132rpx;
					font-weight: bold;
					font-size: 26rpx;
					color: #1b2120;
					padding: 48rpx 0;
				}

				.user_other_value {
					width: calc(100% - 132rpx - 24rpx);
					padding: 44rpx 0;
					font-weight: 400;
					font-size: 30rpx;
					color: #1b2120;
					border-bottom: 1rpx solid #e4e6e6;
					box-sizing: border-box;
					margin-left: 24rpx;

					.fold_con_box {
						display: flex;
						justify-content: space-between;

						.fold_content {
						}

						.fold_btn {
							display: flex;
							flex-direction: row;
							align-items: center;

							.btn_text {
								font-weight: 400;
								font-size: 24rpx;
								color: #ff6084;
							}
						}
					}

					.fold_img_box {
						display: flex;
						flex-direction: row;
						margin-top: 32rpx;

						.fold_img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 4rpx;
							border: 1rpx solid #e4e6e6;
						}
					}
				}
			}

			.user_other_box:last-child {
				.user_other_label {
					padding-bottom: 0;
				}

				.user_other_value {
					border-bottom: none;
					padding-bottom: 0;
				}
			}
		}

		.user_other_info_box:empty {
		}

		.value_added_services_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.add_title {
				font-weight: bold;
				font-size: 26rpx;
				color: #1b2120;
				padding-bottom: 24rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #e4e6e6;
			}

			.add_order_list_box {
				.add_order_item {
					display: flex;
					flex-direction: row;
					margin-top: 48rpx;

					.add_server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 24rpx;
					}

					.add_server_info {
						width: calc(100% - 120rpx - 32rpx);
						padding-bottom: 48rpx;
						border-bottom: 1rpx solid #e4e6e6;
						margin-left: 32rpx;

						.add_server_name {
							font-weight: bold;
							font-size: 30rpx;
							color: #1b2120;
							margin-top: 10rpx;
						}

						.add_server_price {
							display: flex;
							justify-content: space-between;
							margin-top: 38rpx;

							.price {
								font-weight: 400;
								font-size: 26rpx;
								color: #7c807f;
							}

							.times {
								font-weight: bold;
								font-size: 26rpx;
								color: #1b2120;
							}
						}

						.add_server_pets {
							width: 100%;
							background: #f5f6f7;
							border-radius: 12rpx;
							padding: 24rpx 24rpx 8rpx 24rpx;
							box-sizing: border-box;
							margin-top: 16rpx;
							line-height: 1;

							.pet_name_date {
								display: inline-block;
								margin-bottom: 24rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #7c807f;
								margin-right: 24rpx;
							}
						}
					}
				}

				.add_order_item:last-child {
					.add_server_info {
						border-bottom: none;
						padding-bottom: 0;
					}
				}
			}
		}

		.order_data_info_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.income_structure {
				font-weight: bold;
				font-size: 28rpx;
				color: #5c5e5e;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #e4e6e6;
				margin-bottom: 32rpx;
			}

			.order_data_info {
				display: flex;
				justify-content: space-between;
				margin-bottom: 32rpx;

				.order_data_label {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #5c5e5e;
				}

				.studio_img {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}

				.order_data_value {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #1b2120;
					line-height: 1;

					.order_data_value_text {
						font-weight: 400;
						font-size: 28rpx;
						color: #1b2120;
					}

					.dividing_line {
						width: 2rpx;
						height: 28rpx;
						margin: 0 20rpx;
						background: #1b2120;
					}

					.copy_btn {
						font-weight: 400;
						font-size: 28rpx;
						color: #ff6084;
						text-decoration-line: underline;
					}
				}
			}

			.order_data_info:last-child {
				margin-bottom: 0;
			}

			.user_income {
				padding-top: 17px;
				border-top: 1px solid #e4e6e6;
			}

			.order_total {
				font-weight: bold;
				padding-top: 30rpx;
				border-top: 1px solid #e4e6e6;

				.order_data_label,
				.order_data_value {
					color: #1b2120;
					font-weight: bold;
				}
			}
		}
	}

	.footer_btn_box:not(:empty) {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 28rpx;
		background: #ffffff;
		border-top: 1rpx solid #e4e6e6;
		padding: 8rpx 34rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		box-sizing: border-box;

		.hollow_btn {
			box-sizing: border-box;
			width: 222rpx;
			height: 88rpx;
		}

		.solid_btn {
			box-sizing: border-box;
			width: 222rpx;
			height: 88rpx;
		}

		.refuse_btn {
			width: 270rpx;
			height: 72rpx;
		}

		.accept_immediately_box {
			text-align: center;
			width: 400rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
			border-radius: 62rpx;
			font-weight: 400;
			color: #ffffff;
			padding: 10rpx 0 8rpx;
			box-sizing: border-box;
			line-height: 1;
			margin-left: 16rpx;

			.accept_immediately {
				font-size: 26rpx;
			}

			.immediately_time {
				font-size: 20rpx;
				margin-top: 8rpx;
			}
		}

		.btn_mg {
			margin-right: 8rpx;
		}

		.btn_mg:last-child {
			margin-right: 0;
		}
	}

	.footer_btn_box:empty {
	}
}

.m_r_8 {
	margin-right: 8rpx;
}
</style>
